
<script setup lang="ts">
// 导入vue解构
import { onMounted, ref } from 'vue';

// 定义数组准备遍历渲染动画元素
const animateArr = ref([
   {
    img: '/src/assets/交通安全画像系统_nor.png',
    text: '交通安全画像系统',
    img_hov: '/src/assets/交通安全画像系统_hov.png',
  },
  {
    img: '/src/assets/交通态势监控系统_nor.png',
    text: '交通态势监控系统',
    img_hov: '/src/assets/交通态势监控系统_hov.png',
  },
  {
    img: '/src/assets/可视化作战平台_nor.png',
    text: '可视化作战平台',
    img_hov: '/src/assets/可视化作战平台_hov.png',
  },
  {
    img: '/src/assets/支队平台系统本地化应用_nor.png',
    text: '支队平台系统本地化应用',
    img_hov: '/src/assets/支队平台系统本地化应用_hov.png',
  },
  {
    img: '/src/assets/重点车辆监管系统_nor.png',
    text: '重点车辆监管系统',
    img_hov: '/src/assets/重点车辆监管系统_hov.png',
  },
  {
    img: '/src/assets/非机动车未带头盔识别系统_nor.png',
    text: '非机动车未带头盔识别系统',
    img_hov: '/src/assets/非机动车未带头盔识别系统_hov.png',
  }
]);

// 定义数据准备获取动画元素
const animate = ref<HTMLDivElement>()
// 动态设置延迟时间
onMounted(() => {
    // 遍历设置样式
    for (let a = 0; a < animate.value!.children.length; a++) {
        // 给标签设置动画延迟
        (animate.value!.children[a] as HTMLDivElement).style.animationDelay = `
            ${-7.5 - 5 * a}s,
            ${-5 * a}s,
            ${-5 * a}s
        `
    }
});

// 定义鼠标移入事件
const mouseenter = (index: number) => {
    // 停止动画
    for (let a = 0; a < animate.value!.children.length; a++) {
        (animate.value!.children[a] as HTMLDivElement).style.animationPlayState = 'paused'
    }
    // 换图片
    let tmp = animateArr.value[index].img
    animateArr.value[index].img = animateArr.value[index].img_hov
    animateArr.value[index].img_hov = tmp
}

// 定义鼠标移出事件
const mouseleave = (item: any) => {
    // 交换图片
    let tmp = item.img
    item.img = item.img_hov
    item.img_hov = tmp
    // 开启动画
    for (let a = 0; a < animate.value!.children.length; a++) {
        (animate.value!.children[a] as HTMLDivElement).style.animationPlayState = ''
    }
}
</script>

<template>
    <div class="animate" ref="animate">
        <!-- 遍历显示动画元素 -->
        <div @mouseenter="mouseenter(index)" @mouseleave="mouseleave(item)" class="animate-item"
            v-for="(item, index) in animateArr" :key="item.text">
            <img :src="item.img" alt="" style="width: 100px;height: 100px;">
            <p>{{ item.text }}</p>
        </div>
    </div>
</template>

<style lang="scss" scoped>
// 定义动画
@keyframes animateX {
    0% {
        left: 0;
    }

    100% {
        left: calc(100% - 200px);
    }
}

@keyframes animateY {
    0% {
        top: 0;
    }

    100% {
        top: calc(100% - 200px);
    }
}

@keyframes scale {
    0% {
        transform: scale(0.5);
    }

    50% {
        transform: scale(1);
    }

    100% {
        transform: scale(0.5);
    }
}

.animate {
    position: absolute;
    top: 100px;
    left: 0;
    width: 125%;
    height: 50%;
    transform: translateX(-10%);


    .animate-item {
        width: 200px;
        height: 150px;
        text-align: center;
        position: absolute;
        left: 0;
        top: 0;
        animation-name: animateX, animateY, scale;
        animation-duration: 15s, 15s, 30s;
        animation-timing-function: cubic-bezier(.36, 0, .64, 1);
        animation-iteration-count: infinite;
        animation-direction: alternate;

        p {
            color: #fff;
            padding: 0;
            margin: 0;
        }
    }
}
</style>